<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .grid {
        margin: auto;
        width: 530px;
        text-align: center;
      }
      .grid table {
        border-top: 1px solid #517117;
        width: 100%;
        border-collapse: collapse;
      }
      .grid th,
      td {
        padding: 10;
        border: 1px dashed goldenrod;
        height: 35px;
        line-height: 35px;
      }
      .grid th {
        background-color: goldenrod;
      }
      .grid .book {
        padding-bottom: 10px;
        padding-top: 5px;
        background-color: goldenrod;
      }
      .grid .total {
        height: 30px;
        line-height: 30px;
        background-color: goldenrod;
        border-top: 1px solid #517117;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="grid">
        <div>
          <h1>图书管理</h1>
          <div class="book">
            <div>
              <label>编号：</label>
              <input
                type="text"
                id="id"
                v-model="id"
                :disabled="flag"
                v-focus
              />
              <label for="name"> 名称： </label>
              <input type="text" id="name" v-model="bname" />
              <button @click="handle" :disabled="submitFlag">提交</button>
            </div>
          </div>
        </div>
        <div class="total">
          <span>图书总数：</span>
          <span>{{total}}</span>
        </div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>名称</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in books" :key="item.id">
              <td>{{item.id}}</td>
              <td>{{item.bookname}}</td>
              <td>{{item.date | format()}}</td>
              <td>
                <a href="javascript:;" @click.prevent="toEdit(item.id)">修改</a>
                <span>|</span>
                <a href="javascript:;" @click.prevent="delBook(item.id)"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script type="text/javascript">
      // 4:id 输入框自动获取焦点
      Vue.directive('focus', {
        inserted: function (el) {
          el.focus();
        },
      });
      // 5：格式化日期时间 - 补0函数
      function Zero(newDate) {
        return newDate <= 10 ? '0' + newDate : newDate;
      }
      // 5.1：格式化日期时间
      Vue.filter('format', function (val) {
        var y = val.getFullYear();
        Zero(y);
        var M = val.getMonth() + 1;
        Zero(M);
        var d = val.getDate();
        Zero(d);
        var h = val.getHours();
        Zero(h);
        var m = val.getMinutes();
        Zero(m);
        var s = val.getSeconds();
        Zero(s);
        return (
          y +
          '年' +
          M +
          '月' +
          d +
          '日' +
          ' - ' +
          h +
          '时' +
          m +
          '分' +
          s +
          '秒'
        );
      });

      var vm = new Vue({
        el: '#app',
        data: {
          flag: false,
          id: '',
          bname: '',
          submitFlag: false,
          books: [],
        },
        methods: {
          handle: function () {
            if (this.flag) {
              // 2.1：完成修改功能，从数组中跟句输入框中的id匹配，将输入框中的书名完成修改，true退出。
              this.books.some((item) => {
                if (item.id == this.id) {
                  item.bookname = this.bname;
                  return true;
                }
              });
              this.flag = false;
            } else {
              // 1: 添加一本图书
              var book = {};
              book.id = this.id;
              book.bookname = this.bname;
              book.date = new Date();

              // 将book对象，添加到数组中
              this.books.push(book);
            }
            this.id = '';
            this.bname = '';
          },
          // 2: 修改图书， id是不允许修改的，将id和书名渲染到输入框中
          toEdit: function (id) {
            this.flag = true;
            var book = this.books.filter((item) => {
              return item.id == id;
            });
            this.bname = book[0].bookname;
            this.id = book[0].id;
          },
          //3： 删除功能 ，根据id从数组中过滤出，不曾匹配的id，被匹配的过滤掉了，返回的都是不要删除的。
          delBook: function (id) {
            this.books = this.books.filter((item) => {
              return item.id !== id;
            });
          },
        },
        // 6：计算属性，依赖缓存，数据修改才会触发
        computed: {
          total: function () {
            return this.books.length;
          },
        },
        // 7：监听bname书名是否已经存在，存在some就返回true，根据布尔值禁用提交按钮
        watch: {
          bname: function (val) {
            var isDisabled = this.books.some((item) => {
              return item.bookname == val;
            });
            if (isDisabled) {
              this.submitFlag = true;
            } else {
              this.submitFlag = false;
            }
          },
        },
        //8: 在mounted中，请求数据，把请求到的数据渲染到页面中
        mounted: function () {
          var bookData = [
            {
              id: 1,
              bookname: '小王子',
              date: new Date(),
            },
            {
              id: 2,
              bookname: '星星',
              date: new Date(),
            },
            {
              id: 3,
              bookname: '小月亮',
              date: new Date(),
            },
            {
              id: 4,
              bookname: '小太阳',
              date: new Date(),
            },
          ];
          this.books = bookData;
        },
      });
    </script>
  </body>
</html>
